<template>
  <div>
    <el-card style="margin: 20px 0 20px 0">
      <div class="header" style="font-size: 20px; width: 100%">
        <div>
          <label>房屋编号:</label>
          <label>&nbsp;&nbsp;{{inputForm.companyName}}</label>
        </div>
        <div class="right" style="margin-left: 200px">
          <label>商户名称:</label>
          <label>&nbsp;&nbsp;重庆榆风汽车销售有限公司{{inputForm.companyName}}</label>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-form
      
        :model="inputForm"
        ref="inputForm"
        v-loading="loading"
        :class="method === 'view' ? 'readonly' : ''"
        :disabled="method === 'view'"
        label-width="110px"
      >
        <el-row :gutter="15">
          <el-col>
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              style="margin-top: 10px"
            >
              <el-tab-pane label="房产信息" name="first">
                <div style="width: 100%">
                  <!--房产信息-->
                  <div style="width: 100%">
                    <div
                      style="
                        width: 100%;
                        font-size: 18px;
                        border-bottom: 1px double #ddd;
                        line-height: 40px;
                      "
                    >
                      房产信息
                    </div>
                    <div style="width: 100%; margin-top: 20px">
                      <el-form v-model="inputForm">
                        <el-row>
                          <el-col :span="8">
                            <el-form-item
                              label="房屋类型："
                              prop="projectProperty"
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                v-model="inputForm.buildingType"
                                placeholder="请选择"
                                style="width: 70%"
                              >
                                <el-option
                                  v-for="item in proBuildTypeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="房产性质："
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                v-model="inputForm.projectProperty"
                                placeholder="请选择"
                                style="width: 70%"
                              >
                                <el-option
                                  v-for="item in projectPropertyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="房屋编号："
                              label-width="140px"
                            >
                              <el-input
                              :disabled="true"
                                v-model="inputForm.projectName"
                                style="width: 70%"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                            <el-form-item
                              label="房产楼号/区域："
                              prop="projectFloorNumber"
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                v-model="inputForm.projectRegionId"
                             
                                style="width: 70%"
                              >
                                <el-option
                                  v-for="(item, index) in projectTypeIdList"
                                  :label="item.label"
                                  :key="index"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="楼层："
                              prop="projectName"
                              label-width="140px"
                            >
                              <el-input
                              :disabled="true"
                                v-model="inputForm.projectFloorNumber"
                                style="width: 70%"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="房号："
                              prop="projectName"
                              label-width="140px"
                            >
                              <el-input
                              :disabled="true"
                                v-model="inputForm.projectNumber"
                                style="width: 70%"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                            <el-form-item
                              label="面积(㎡)："
                              prop="projectStatus"
                              label-width="140px"
                            >
                              <el-input
                              :disabled="true"
                                v-model="inputForm.projectArea"
                                style="width: 70%"
                                placeholder="请输入合同编号"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <!-- 暂无数据 -->
                            <el-form-item
                              label="单价："
                              prop="remarks"
                              label-width="140px"
                            >
                              <el-input
                              :disabled="true"
                                v-model="inputForm.projectUnitPrice"
                                style="width: 70%"
                                placeholder="单价"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="租期类型："
                              prop="remarks"
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                v-model="inputForm.rentType"
                                style="width: 70%"
                              >
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                            <el-form-item label="户型图:" label-width="140px">
                              <el-upload
                                class="upload-demo"
                                action=""
                                :auto-upload="false"
                                multiple
                              >
                              </el-upload>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="房产状态："
                              prop="remarks"
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                v-model="inputForm.projectStatus"
                                style="width: 70%"
                              >
                                <el-option
                                  v-for="item in proStatusList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item
                              label="关联合同："
                              prop="remarks"
                              label-width="140px"
                            >
                              <el-select
                              :disabled="true"
                                style="width: 70%"
                                v-if="inputForm.ctContract"
                                v-model="inputForm.ctContract.contractNumber"
                              >
                                <el-option key="" label="" value="">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                  <!--操作日志 -->
                  <div style="width: 100%; float: left">
                    <div
                      style="
                        width: 100%;
                        font-size: 18px;
                        border-bottom: 1px double #ddd;
                        line-height: 40px;
                      "
                    >
                      操作日志
                    </div>
                    <div class="block" style="margin-top: 20px">
                      <el-timeline>
                        <el-timeline-item
                          v-for="(activity, index) in logList"
                          :key="index"
                          icon="el-icon-more"
                          size="large"
                          :timestamp="activity.modifyContent"
                        >
                          {{ activity.updateByName }}&nbsp;&nbsp;{{
                            activity.updateDate
                          }}
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <!--历史记录-->
              <el-tab-pane label="历史记录" name="second">
                <el-table
                  :data="historyList"
                  border
                  size="medium"
                  v-loading="loading"
                  class="table"
                >
                  <el-table-column
                    prop="projectNumber"
                    show-overflow-tooltip
                    label="房产编号"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="modifyProjectStatus"
                    show-overflow-tooltip
                    :formatter="formatterStatus"
                    label="房产状态"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="contractNumber"
                    show-overflow-tooltip
                    label="关联合同"
                  >
                    <template slot="modifyContractId" slot-scope="scope">
                      <el-link
                        type="primary"
                        :underline="false"
                        @click="
                          handleContractView('view', scope.row.modifyContractId)
                        "
                        >{{ scope.row.contractNumber }}</el-link
                      >
                    </template>
                  </el-table-column>
                  <!--<el-table-column prop="remarks"
                                   show-overflow-tooltip
                                   
                                   label="备注">
                  </el-table-column>-->
                  <el-table-column prop="updateByName" label="操作人">
                  </el-table-column>
                  <el-table-column
                    prop="updateDate"
                    show-overflow-tooltip
                    label="操作时间"
                  >
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<style>
</style>
<script>
import {
  getObj,
  getProjectType,
  getProjectStatus,
  getProjectpProperty,
  getOperationLog,
  getModifyLog,
} from "@/api/market/estate/rmproject";
import { getDicType } from "@/api/common";
export default {
  data() {
    return {
      title: "",
      method: "",
      dialogWidth: "40%",
      visible: false,
      activeName: "first",
      projectPropertyList: [],
      proBuildTypeList: [],
      proStatusList: [],
      projectTypeIdList: [],
      loading: false,
      inputForm: {
        id: "",
        modifyProjectStatus: "",
        projectStatus: null,
        projectArea: "",
        projectName: "",
        projectFloorNumber: "",
        projectTypeId: "",
        buildingType: "",
        projectProperty: null,
        projectNumber: "",
        remarks: "",
        delFlag: "",
        ctContract: {
          id: "",
          contractNumber: "",
        },
        ctContractProjectList: null,
        sysProjectType: {
          id: "",
          typeName: "",
        },
      },
      //操作记录
      logList: [], //logType: 1,//1.房产 2.车辆 3.合同
      //历史记录
      historyList: [],
      
    };
  },
  created() {
    //房产状态
    getProjectStatus().then((response) => {
      if (response.data != null) {
        this.proStatusList = response.data.data;
      }
    });
    //房产性质
    getProjectpProperty().then((response) => {
      if (response.data != null) {
        this.projectPropertyList = response.data.data;
      }
    });
    //获取房产类型
    getProjectType().then((response) => {
      if (response.data != null) {
        this.proBuildTypeList = response.data.data;
      }
    });
  },
  mounted() {
    /*获取房屋id */
    const id = this.$route.query.id;
this.inputForm.id = id;
    /* 操作记录 */
    getOperationLog(this.inputForm.id).then((response) => {
      if (response.data.data != null) {
        this.logList = response.data.data;
      }
    });
    /* 房产信息 */
    getObj(this.inputForm.id).then((response) => {
      console.log(response, "获取房产详情成功");
      if(response.data.code==0){
        this.$message.success('获取房产详情成功')
      }
      response.data.data.projectProperty =
        (response.data.data.projectProperty || "") + "";
      response.data.data.projectStatus =
        (response.data.data.projectStatus || "") + "";

      this.inputForm = response.data.data;
      getDicType(this.inputForm.buildingType).then((res) => {
        this.projectTypeIdList = res.data.data;
        console.log(  this.projectTypeIdList,'88888');
      });
    });
  },

  methods: {
    formatterStatus(row) {
      let labelstr = "";
      for (let i = 0; i < this.proStatusList.length; i++) {
        if (this.proStatusList[i].value == row.modifyProjectStatus) {
          labelstr = this.proStatusList[i].label;
          break;
        }
      }
      return labelstr;
    },
    handleClick(tab, event) {
      //tab切换历史记录,加载数据
      if (tab.name == "second") {
        //获取操作日志
        getModifyLog(this.inputForm.id).then((response) => {
          if (response.data.data != null) {
            this.historyList = response.data.data;
          }
        });
      }
    },
    init(method, id) {
      this.method = method;
      this.inputForm.id = id;
      if (method === "view") {
        this.title = "查看房产";
      }
      /*  this.visible = true; */
      //获取房产详情数据
      //this.loading = false
      this.$nextTick(() => {
        this.$refs.inputForm.resetFields();

        // //获取房产信息
        // getObj(id).then((response) => {
        //   response.data.data.projectProperty =
        //     (response.data.data.projectProperty || "") + "";
        //   response.data.data.projectStatus =
        //     (response.data.data.projectStatus || "") + "";

        //   this.inputForm = response.data.data;
        //   getDicType(this.inputForm.buildingType).then((res) => {
        //     this.projectTypeIdList = res.data.data;
        //   });
        // });
        //获取操作日志
        // getOperationLog(id).then((response) => {
        //   if (response.data.data != null) {
        //     this.logList = response.data.data;
        //   }
        // });
      });
    },
    //查看合同
    // handleContractView(method, id) {
    //   //打开合同详情
    // },
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: start;
}
</style>
